@charset "utf-8";
@font-face {
font-family: "Golos Text";
src: url(GolosText-VariableFont_wght.ttf);
}
html {
font-size: 100%;
scroll-behavior: smooth;
}
body {
background: #C1EBF4 url(ciel.webp) fixed;
font-family: "Golos Text", system-ui;
font-size: 1rem;
line-height: 1.4rem;
font-weight: 475;
letter-spacing: .013rem;
/* CLAMP */
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ DIV « GLOBAL » ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
#global {
margin: 2% 8%;
padding: 2%;
background: #dac9b7 url(sepia_pour_fond_de_page.webp);
box-shadow: 1px 1px 12px #555;
hyphens: auto;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^ Styles GLOBAUX ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/
abbr {
cursor: help;
font-weight: 700;
color: chocolate;
text-decoration: none;
/* text-decoration: underline dotted 2px;
background: url(haut-parleur_lien.png) no-repeat;
background-position: 100% 0;
background-size: 16px;
padding-right: 22px; */
}
h1 {
text-align: center;
/* 15/07/2026
font-family: system-ui; */
font-weight: 550;
letter-spacing: normal;
}
h2 {
color: rgba(255,255,255,1);
text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989993px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756803px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279416px 0px;
letter-spacing: normal;
}
h3 {
text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989993px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756803px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279416px 0px;
letter-spacing: normal;
}
h3 img {
vertical-align: middle;
}
iframe {
border: none;
}

/* Changer la couleur du texte SÉLECTIONNÉ */
p::selection, li::selection {
color: #dac9b7;
background: #000;
}

h3.logo_danger_pour_h3 {
display: block;
background: url(danger.svg) no-repeat;
background-position: center;
background-size: 50px 44px;
padding: 25px 0px;
width: 50px;
}
h3.logo_ffvp_pour_h3 {
display: block;
background: url(ffvp_logo_50px.svg) no-repeat;
background-position: center;
background-size: 50px 46px;
/* background-color: black; */
padding: 25px 0px;
width: 50px;
}
h3.memento {
display: inline-block;
background: url(memento.png) no-repeat;
background-position: center;
background-size: 123px 50px;
background-color: black;
padding: 25px 0px;
margin: 0;
width: 123px;
}
h3.memento:hover {
display: inline-block;
background: url(memento.png) no-repeat;
background-position: center;
background-size: 123px 50px;
background-color: black;
padding: 25px 0px;
margin: 0;
width: 123px;
opacity : .4;
box-shadow: 8px 8px 12px #555;
}
h3.logo_spirale_pour_h3 {
display: block;
position: relative;
background: url(spirale_logo_50.svg) no-repeat;
background-position: center;
background-size: 50px 50px;
background-color: black;
padding: 25px 0px;
width: 50px;
}
hr {color: rgba(255,255,255,1)}
strong { font-weight: 650 }
/* 26/06/2026 - source : https://gist.github.com/unruthless/413930 */
sup { font-size: 75%; line-height: 0; position: relative; top: -0.5rem; vertical-align: baseline; }

/* CLASSES */
.accent {padding: 1rem; background-color: #dac9b7; border-top: 1px solid; border-bottom: 1px solid;}
/* À REMPLACER SI NÉCESSAIRE PAR .TRIANGLE */
/* .accent::before {content: '\25B6\00A0';} */
.bl { border-left: 1px solid; padding-left: 13px }
.blol { border-left: 1px solid; padding-left: 13px; margin-left: 25px }
.blanc {background-color: rgba(255,255,255,1);}
.bouton {display: inline-block; width: 50px; margin-right: 1%; vertical-align: sub !important; border-radius: 50px; box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5);
}
/* Pour certaines images */
.cadre {border-top: 1px solid; border-bottom: 1px solid;}
.cadom { width: 70%; margin: auto; padding: 1% 2% 1% 0; box-shadow: 8.0px 16.0px 16.0px hsl(0deg 0% 0% / 0.25) }
.ctr {text-align: center;}
/* .danger */
/* li.danger::before, p.danger::before { content: "⚠️\00A0";  vertical-align: super; line-height: 0; font-size: 23px} */
/* li.danger::before, p.danger::before, span.danger::before { content: url(danger-25x22.png); margin-right: 5px; line-height: 0 } */
*.danger::before { content: url(danger-25x22.png); margin-right: 5px; line-height: 0 }
/* .durée {font-variant-position: super; NE FONCTIONNE PAS AVEC GOOGLE CHROME} */
/* https://developer.mozilla.org/fr/docs/Web/HTML/Element/sup */
/* .durée {font-size: 80%; vertical-align: super AUGMENTE MALENCONTREUSEMENT L'INTERLIGNE} */
.durée {font-size: 80%;}
.durée::before {content: '\00A0\1F553\2006';}
.ex { width: 70%; margin: auto; padding: 0 1% }
.gr { font-weight: 650 }
.indent { text-indent: 2rem }
.info::before { content: "\00A0\1F6C8\00A0"; padding: 1px 0 2px; font-size: 20px; font-style: normal; font-weight: 475; letter-spacing: normal; color: #FFF; background-color: #4BA1EB; border-radius: 4px; text-shadow: none }
.jstf {text-align: justify;}
.mlf {padding: 1rem; background-color: #dac9b7; border-top: 1px solid; border-bottom: 1px solid;}
.mtb { text-align: center; margin: 3% 0 }
/* FONT :Les valeurs pour font-style, font-variant et font-weight doivent PRÉCÉDER la valeur pour font-size. La valeur pour line-height doit IMMÉDIATEMENT suivre la valeur pour font-size, séparée par une barre oblique (par exemple "16px/3"). La valeur pour font-family doit être la dernière fournie. La valeur de font-variant ne peut utiliser que les valeurs définies en CSS 2.1 : normal et small-caps. La valeur de font-stretch ne peut être qu'un mot-clé. */
figcaption {font-style: italic; font-size: .8rem; line-height: 1.2rem; text-align: center; padding-bottom: .5rem}
/* Pour « figure » quand DEUX images se suivent sur la MÊME ligne avec UN SEUL « figcaption » */
/* figure.double {margin: auto; max-width: fit-content;} */
figure {margin: .5rem auto 1rem; max-width: fit-content;}
input {
font-family: "Golos Text", system-ui;
font-size: 1rem;
line-height: 1.4rem;
font-weight: 475;
letter-spacing: .013rem;
}
div.modèle {width: 90%; margin-left: 5%;}
/* hr .modèle {
width: 90%; margin-left: 5%;
} */
/* les iframes d'un div « class="modèle" » se configurent AUTOMATIQUEMENT (sans précision de hauteur ou de largeur) ! */
.modèle iframe {display: block; width: 100%; height: 539px; margin: auto; border-bottom: 1rem solid #d4d4d7}
/* Dans les AUTRES div il faut ATTRIBUER la « class="modèle" » à l'iframe ! */
iframe.modèle {display: block; width: 90%; height: 539px; margin: 3% auto; border-bottom: 1rem solid #d4d4d7}
/* les images d'un div « class="modèle" » se configurent automatiquement. Pour SURCHARGER ce réglage par défaut, préciser l'alignement de l'image DANS L'HTML ou utiliser une « class » utilisant !important  */
.modèle img {
vertical-align: middle;
}
/* Image de Philippe LHOTELLIER - « class="pl" »  */
/* p.pl, li.pl, div.pl {background: url(./pl.png) no-repeat; background-position: top left; background-size: 37px 50px; padding-left: 50px;} */
div.pl, h4.pl, li.pl, p.pl {background: url(pl.svg) no-repeat; background-position: top left; background-size: 50px 50px; padding-left: 60px;}
/* .sc {font-variant: small-caps; letter-spacing: normal;} */
/* MODIFIÉ LE 04/03/2026 POUR UTILISATION « SUMMARY » */
.sc {font-variant: small-caps;}
p .sc, li .sc {
/* font-weight: 540;
20/06/2026 */
font-weight: 650;
letter-spacing: .013rem;
background-color: #dac9b7;
outline: 2px solid #dac9b7;
}
.rex::after { content: "\00A0\REX\00A0 "; margin: 0px 5px 0px 2px; line-height: 0; vertical-align: 6px; font-size: 10px; font-style: normal; font-weight: 475; background-color: #FDF100; border: 2px solid #ED1C22; border-radius: 4px; outline: 1px solid #FDF100 }

/* 04/03/2026 : SIMILI LIEN UTILISÉ DANS LE « SOMMAIRE » */

.sl {
transition: all ease-in-out .5s;
text-decoration: underline dotted 2px;
cursor: pointer;
}
.sl:hover {
color: #0066CC;
text-decoration: underline dotted 2px transparent;
}
/* 04/03/2026 : POUR METTRE EN BLEU AU SURVOL LE MARQUEUR DE SUMMARY */
summary:hover {
color: #0066CC;
}
/* 04/03/2026 : À QUOI ÇA SERT ? */
img.oli, span.oli {
outline: 2px solid #4480bc; padding: 0 .2em;
}
table.center {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
}
/* Comme pour la classe « .accent » mais sans couleur de fond */
.triangle::before {content: '\25B6\00A0';}

/* Les réglages INITIAUX des LISTES */

 ul, ol {
list-style-type: none;
}
ul li {
margin-top: 1rem;
}
ol li {
margin-top: .5rem;
}
/* Pour « Sommaire » */
ol.minus li {
font-size: 80%;
}
/* ol li:first-child {
margin-top: .25rem;
} */
.nol {
list-style-type: decimal;
list-style-position: inside;
margin-top: .5rem;
}
.dol {
list-style-type: disc;
list-style-position: inside;
margin-top: .5rem;
}
.lst0 { list-style-type: none }

div.puce p, span.puce {
display: list-item;
list-style-type: disc;
list-style-position: inside;
margin-top: -.5rem;
text-indent: 2rem;
}

/* 17/06/2026 */
div.puce2 p, span.puce2 {
display: list-item;
list-style-type: disc;
list-style-position: inside;
/* margin-top: -.5rem;
text-indent: 2rem; */
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* Pour « Présentation du travail en piste » */
.gauchiste ul {
margin-left: 2%;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^ */

/* Pour faire précéder les liens SONORES d'une ICÔNE DE HAUT-PARLEUR | pour préciser la « cible » pour les balises INLINE affecter la classe « .son » à un SPAN */
.son {
cursor: help;
text-decoration: underline dotted 2px;
background: url(haut-parleur_lien.png) no-repeat;
background-position: 100% 0;
background-size: 16px;
padding-right: 22px;
}
.son:hover {
color: #0066CC;
text-decoration: none;
background: url(haut-parleur_lien_hover.png) no-repeat;
background-position: 100% 0;
background-size: 16px;
padding-right: 22px;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ IFRAME ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

/* pour éviter de dimensionner à chaque fois l'iframe ontenant le MEMENTO
.memento {
height: 500px;
width: 100%;
margin: 2% 0%;
pour ajouter une épaisse bordure bleue à la fin de l'iframe
border-bottom: 10px solid #0090D3;
} */

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ LISTES ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

/* IMPORTANT */

.cr {
column-rule: 2px groove rgba(255,255,255,1);
}
/* text-align: justify; */
.col2 {
width: 90%;
margin-left: 5%;
column-count: 2;
column-gap: 8.5%;
}
.col2 ul {
margin-left: -10%;
}
 /* texte centré dont l'espacement vertical est choisi avec la balise à laquelle est appliquée la classe « all » */
.col2 *.all {
column-span: all;
text-align: center;
}
 /* Astérisme centré dont l'espacement vertical est choisi avec la balise à laquelle est appliquée la classe « allo » */
.col2 *.allo {
column-span: all;
text-align: center;
}
 /* Astérisme : https://fr.wikipedia.org/wiki/Ast%C3%A9risme_(typographie). L'espacement vertical est choisi avec la balise à laquelle est appliquée la classe « allo » */
.col2 *.allo::before {
content: "\2042";
}
.col2 div {
padding: 0 10px;
background-color: #dac9b7;
border-top: 1px solid;
border-bottom: 1px solid;
}
/* « flèche » comme premier caractère pour attirer l'attention */
/* .col2 div li:first-child::before, .col2 div p:first-child::before {content: '\25B6\00A0';} */

/* La valeur du margin-top négatif doit ètre égale à celle de la taillle de la police de caractère du PREMIER terme des DEUX colonnes.
Pour surcharger la valeur du padding donné, au-dessus, à « .col2. div » */
.col2 div:nth-child(-n + 2) {
margin: -1rem 0 0 0;
padding: 0;
border: none;
}
/* C'est la seule commande rconnue par firefox pour obliger un DIV à sauter de colonne dans .col2 */
.col2 .saut {break-inside: avoid; padding: 0; background-color: transparent; border: none;}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ LES IMAGES ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

/* IMPORTANT */

/* Pour permettre au navigateur de redimensionner AUTOMATIQUEMENT les images selon celle de leur CONTENANT DIMENSIONNÉ, EN CONSERVANT LE RATIO largeur/hauteur. */
/* img {
max-width: 100%;
height: auto;
box-sizing: border-box;
transition: all 0.2s;
} */

/* Pour CENTRER une image isolée, SANS LIEN car sinon LES ZONES ADJACENTES DEVIENNENT CLIQUABLES */
.ib {
display: block;
margin: auto;
}

/* Pour CENTRER une image isolée, AVEC UN LIEN */
.iib {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}

/* Pour attribuer l'icône « ffvp_logo_50px.png » à un div */
.ffvp[class~="ffvp"] {
background: url(ffvp_logo_50px.png);
background-repeat: no-repeat;
background-position: top left;
background-size: 50px 50px;
}

/* !important pour pouvoir surcharger les images INLINE appartenant au div « modèle » qui sont par défaut en « middle » */
.vas {vertical-align: sub !important;}
/* Pour utiliser figure/ficaption */
.super {vertical-align: super;}
/* J'ai attribué cette propriété DIRECTEMENT aux h3 ! */
.vam {vertical-align: middle !important;}

/* Pour les images ou les div à entourer d'un CADRE */
.bordure {
border-top: 2px solid #4c4c4c;
border-right: 2px solid #b2b2b2;
border-bottom: 2px solid #b2b2b2;
border-left: 2px solid #4c4c4c;
}

.ombre {
/* box-shadow: 8px 8px 12px #555;
box-shadow:8px 8px 10px 0 rgba(0,0,0,0.5) */
box-shadow: 8.0px 16.0px 16.0px hsl(0deg 0% 0% / 0.25)
}

.ombre2 {
box-shadow: 1px 1px 12px #555;
}

.sansombre {
box-shadow: 8px 8px 12px transparent;
/* box-shadow: none; */
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ LES DIV  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

/* BORDER */

/* Pour remplacer la balise hr */
div.botobo {
/* 28/01/2025 : https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/
box-sizing: border-box;
width: 100%; */
border-top-color: rgba(255,255,255,1);
border-top-style: groove;
border-top-width: 2px;

border-bottom-color: rgba(255,255,255,1);
border-bottom-style: groove;
border-bottom-width: 2px;

padding: 2% 0 2% 0;
}

/* Comme la balise hr mais pour syler la bordure gauche d'un div*/
.bole {
border-left: 2px groove #fff;
padding-left: 4%;
}

/* Comme la balise hr mais pour syler la bordure droite d'un div*/
.bori {
border-right: 2px groove #fff;
padding-right: 4%;
}

.chapeau {
width: 67%;
margin: 4% auto;
}

.clic {
/* 	display: block;
	position: relative;
	left: 50%;
	transform: translateX(-50%); */
	background-image: url(clic.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10%;
}

.clic2 {
/* display: block;
position: relative;
left: 50%;
transform: translateX(-50%); */
background-image: url(clic_02.png);
background-repeat: no-repeat;
background-position: center;
background-size: 20%;
}

/* Je REGROUPE la gestion des images de « clic » et de « clic2 » */
.clic img, .clic2 img {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
border: 2px groove rgba(255,255,255,1);
vertical-align: middle;
margin: 3% 0;
}

/* FLEX */

 /* Il s'agit purement et simplement de l'équivalent du "ET" : les deux conditions doivent être réunies pour fonctionner. Il n'y a plus de notion d'héritage. */
div.spécial {
display: flex;
align-items: center;
}

/* POSITION */

.abs {
position: absolute;
top: 0%;
left: 0%;
width: 50%;
margin: 0% 0% 0% 0%;
padding: 0% 0% 0% 0%;
}

.rel {
position: relative;
}

/* RETOUR au SOMMAIRE */
.retour {
position: fixed;
top: 50%;
left: 0;
width: 8%;
transform: translateY(-50%);
}

/* .retour a:link {
color:green; text-decoration : none;
} */



.droitier {
float: right;
width: 41%;
margin-right: 5%;
}
/* Sauf indication définie, DANS L'HTML, de l'alignement de l'image */
.droitier img {
vertical-align: middle;
/* max-width : 100% */
}
.droitier iframe {
width: 100%;
}
}
/* À attribuer comme classe à l'image si le div ne contient que cela ou au div lui-même s'il contient du texte. */
.correction{
margin-top: 10px;
height: 704px;
overflow: visible;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
}

.gauchiste {
float: left;
width: 41%;
margin-left: 5%;
}
/* Sauf indication définie, DANS L'HTML, de l'alignement de l'image */
.gauchiste img {
vertical-align: middle;
}
.gauchiste iframe {
width: 100%;
}
.spacer { clear: both }

/* FLEXIBLE

.flexible {
width: 100%;
margin: 0% auto 0%;
text-align: justify;
display:flex; flex-wrap:wrap; justify-content:space-around;
}

.flexible div {
width: 43%;
margin-bottom: 50px;
position: relative; top: 0px ; right: 0px ;
}
.flexible .bordure {
border: solid 2px #496172;
border-radius: 1em;
padding: 2%;
}
.flexible img {
display: block;
margin: 0% auto 0%;
border: none;
border-radius: 0em;
box-shadow: 8px 8px 12px #555;
}
.flexible iframe {
display: block;
margin: 0% auto 0%;
box-shadow: 8px 8px 12px #555;
}
.flexible .inline {
display: inline;
box-shadow: none;
} */

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ COLORBOX : https://www.jacklmoore.com/colorbox/ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

/* ColorBox Core Style : the following CSS is consistent between example themes and should not be altered.*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0; padding-top: 7px;} /* Pour règler la hauteur sous la bordure supérieure du titre. */
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* User Style : change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */
/* #cboxOverlay{background-image:url(fond_carte.jpg);} */
#cboxOverlay{background-image:url(ciel.webp);}
/* #cboxOverlay{background-color: #000;} */
#colorbox{}
#cboxTopLeft{width:25px; height:25px; background:url(border1.png) no-repeat 0 0;}
#cboxTopCenter{height:25px; background:url(border1.png) repeat-x 0 -50px;}
#cboxTopRight{width:25px; height:25px; background:url(border1.png) no-repeat -25px 0;}
#cboxBottomLeft{width:25px; height:25px; background:url(border1.png) no-repeat 0 -25px;}
#cboxBottomCenter{height:25px; background:url(border1.png) repeat-x 0 -75px;}
#cboxBottomRight{width:25px; height:25px; background:url(border1.png) no-repeat -25px -25px;}
#cboxMiddleLeft{width:25px; background:url(border2.png) repeat-y 0 0;}
#cboxMiddleRight{width:25px; background:url(border2.png) repeat-y -25px 0;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:35px;} /* hauteur du bandeau du titre */
#cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#0066CC;}  /* Caractéristiques du titre ; color:#404040 */
#cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
#cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
#cboxLoadingOverlay{background:#fff url(loading.gif) no-repeat 5px 5px;}
#cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}

/* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/ */
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ LES LIENS ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

/* IMPORTANT */

/* 11/01/2025 : color: #0066CC; */
a, a:link, a:visited, a:focus {
transition: all ease-in-out .5s;
color: #000;
text-decoration: underline dotted 3px #0066CC;
}
a:hover {
color: #0066CC;
text-decoration: underline dotted 3px transparent;
text-shadow: none
}
/* Pour les liens dans « gauchiste » de la visite pré-vol
.gauchiste {
^^^^^^^^^^^^
} */

/* Pour l'aspect des IMAGES ayant UN LIEN. */
a img {
transition: all ease-in-out .5s;
}
a img:hover {
opacity : .4;
}

/* Pour l'icône « fixed » qui ramène au « Sommaire » */
.retour a img:hover {
opacity : 1;
}
.retour a img:active {
opacity : 1;
box-shadow: none;
transform: translateX(16px) scale(1.30);
}

/* Pour attribuer l'icône « lien_externe_wikipedia.svg » aux liens externes et changer sa couleur au survol en appelant lien_externe_wikipedia_hover.svg */
a:link[class~="lien_ext"], a:visited[class~="lien_ext"], a:focus[class~="lien_ext"] {
background: url(lien_externe_wikipedia.svg) no-repeat;
background-position: 100% 1px;
background-size: 16px;
padding-right: 21px
}
a:hover[class~="lien_ext"] {
background: url(lien_externe_wikipedia_hover.svg) no-repeat;
background-position: 100% 1px;
background-size: 16px;
padding-right: 21px
}

/* Pour attribuer l'icône « spirale_liens.jpg » aux liens appelant des videos dans « Colorbox » (class="16x9") */
a[class~="spirale"] {
background: url(spirale_liens.svg) no-repeat;
/* background-position: 100% 0px; */
background-position: 100% 4px;
/* background-size: 16px; */
background-size: 14px;
padding-right: 21px;
}
a[class~="spirale0"] {
background: url(spirale_liens.svg) no-repeat;
background-position: 100% 1px;
background-size: 16px;
padding-right: 21px;
}
.spirale0::before {
content: url(spirale_liens_sans-texte.svg);
vertical-align: 2px;
}
/* spirale_liens_sans-texte.svg */
/* Pour attribuer l'icône « § » aux liens du chapitre « Sommaire »
li a[href^="#"]::after {
content: "\00A0\00A7";
} */